<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p  v-html="damu.damuwife.wifeson.sonname" >

        </p>
        {{damu.damuwife.wifeson.sonname}}
    </div>
</body>
<script src="./MVVM/mvvm.js"></script>
<script src="./MVVM/observer.js"></script>
<script src="./MVVM/compile.js"></script>
<script src="./MVVM/watcher.js"></script>
<script>

   //1. data中的每一个属性都对应了一个dep
   //2. 每一个指令(v-  ; {{}}) 都对应了一个watcher
   /*3. dep与watcher要构建一个多对多关系
   *
   *    dep  得知道自己被多少个 watcher所引用着
   *        dep 靠一个数组 subs存watcher [watcher]
   *    watcher 得知道它控制着多少个 dep
   *        watcher 靠一个对象 depIds存dep {0:dep0,1:dep1 .... }
   * */

    //初始化渲染
    var vm = new MVVM({
        el:"#app",
        data:{
            damu:{
                damuname:"达姆",
                damuage:18,
                damuwife:{
                    wifename:"周冬雨",
                    wifeage:17,
                    wifeson:{
                        sonname:"王思聪",
                        sonage:38,
                    }
                }
            },
            a:"a",
            b:"b",
            c:"c"
        }
    })

   //发布订阅模型
   vm.damu.damuwife.wifeson.sonname="小小达姆";

</script>
</html>